import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import Moment from 'moment';
import {
    Row, Col, Card, Form, Input,
    Select, Icon, Button, Dropdown, Menu,
    InputNumber, DatePicker, Modal, message,
    Divider, Tag, Table, Pagination, Spin, Upload
    , AutoComplete
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './CustomerManagement.less';
import querystring from 'querystring';

import { validatemobile } from '../../utils/utils';
import TextArea from 'antd/lib/input/TextArea';

const { Description } = DescriptionList;
const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;
/*
  销售跟踪
*/

@connect(({ customer }) => ({
    customer,
}))
@Form.create()
export default class CustomerSalesTracking extends PureComponent {
    state = {
        modalVisible: false,
        deleteCustomer: false,
        id: '',
    };

    componentDidMount() {
        const { dispatch, location } = this.props;
        const params = querystring.parse(location.search.slice(1));
        this.setState({
            id: params.id,
        })
        // console.log("customer/getCustomerTrackList", params.id) 
        dispatch({
            type: 'customer/getTrackList',
            payload: {
                id: params.id,
            },
        });
        dispatch({
            type: 'customer/getCustomerDetails',
            payload: {
                id: params.id,
            },
        });
    }

    handleSubmitOk = () => {
        const { validateFieldsAndScroll } = this.props.form;
        const { dispatch, location } = this.props;
        validateFieldsAndScroll((error, values) => {
            // console.log('handleSubmitOk: ', values);
            if (!error) {
                this.setState({
                    modalVisible: false,
                });
                this.props.form.resetFields();
                dispatch({
                    type: 'customer/addCustomerTrack',
                    payload: {
                        customerId: this.state.id,
                        ...values,
                    },
                    callback: () => {
                        const { dispatch } = this.props;
                        const { customer: { customerResult } } = this.props;
                        if (customerResult.code == 200) {
                            message.success("提交成功")
                            dispatch({
                                type: 'customer/getTrackList',
                                payload: {
                                    id: this.state.id,
                                },
                            });
                        } else {
                            message.success(customerResult.message)
                        }
                    }
                })
            }
        })
    }

    salesColumns = [{
        title: '历史跟踪情况',
        dataIndex: 'note',
        key: 'note',
    }, {
        title: '联系时间',
        dataIndex: 'createTime',
        key: 'createTime',
    }, {
        title: '跟踪人',
        dataIndex: 'trackName',
        key: 'trackName',
    }];

    handleBackCusomer = () => {
        this.props.dispatch(routerRedux.push('/customer/customer-management'));
    }

    render() {
        const { getFieldDecorator, form, dispatch } = this.props;
        const { customer: { customerDetailsObj, customerTrackList, customerLoading } } = this.props;
        //const { customer: { customerList, customerTrackList, customerLoading } } = this.props;
        const formItemLayout = {
            labelCol: {
                span: 5,
            },
            wrapperCol: {
                span: 14,
            },
        };

        return (
            <PageHeaderLayout title="销售跟踪" >
                {
                    // JSON.stringify(customerTrackList)
                }
                <Card bordered={false} loading={customerLoading}>
                    <DescriptionList style={{ marginTop: '20px', marginBottom: '40px' }} size="small" col="3">
                        <Description term="客户名称">{customerDetailsObj && customerDetailsObj.custName}</Description>
                        <Description term="身份证">{customerDetailsObj && customerDetailsObj.idcard}</Description>
                        <Description term="联系电话">{customerDetailsObj && customerDetailsObj.phone}</Description>

                        {/* <Description term="客户名称">{customerList && customerList.custName}</Description>
                        <Description term="身份证">{customerList && customerList.idcard}</Description>
                        <Description term="联系电话">{customerList && customerList.phone}</Description> */}
                    </DescriptionList>
                    <div className={styles.tableList}>
                        <Table
                            dataSource={customerTrackList}
                            columns={this.salesColumns}
                            loading={customerLoading}
                            rowKey="id"
                        />
                    </div>
                </Card>
                <Card>
                    <Form className={styles.preCheckForm} onSubmit={this.handleSubmitOk}>
                        <FormItem label="跟踪情况" {...formItemLayout}>
                            {form.getFieldDecorator('note', {
                                rules: [{
                                    required: true, message: '请输入跟踪情况',
                                }],
                            })(
                                <TextArea rows={4} placeholder="请输入跟踪情况" />
                            )}
                        </FormItem>
                        <FormItem
                            wrapperCol={{
                                xs: { span: 24, offset: 0 },
                                sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
                            }}
                            label=""
                        >
                            <Button type='primary' htmlType="submit" loading={customerLoading}>
                                提交
                            </Button>
                            <Button style={{ marginLeft: '20px' }} onClick={this.handleBackCusomer}>
                                返回
                            </Button>
                        </FormItem>
                    </Form>
                </Card>
            </PageHeaderLayout>
        );
    }
}
